<template>
  <div class="page flex-col">
    <div class="block_63 flex-row">
      <div class="section_1 flex-col">
        <div class="text-wrapper_1 flex-col">
          <span class="text_1">中压</span>
        </div>
      </div>
      <div class="box_56 flex-col">
        <div class="text-wrapper_26 flex-col">
          <span class="text_114">中压</span>
        </div>
      </div>
      <div class="box_56 flex-col">
        <div class="text-wrapper_26 flex-col">
          <span class="text_114">中压</span>
        </div>
      </div>
      <!-- <div class="image-wrapper_5 flex-col">
        <img
          class="image_29"
          referrerpolicy="no-referrer"
          src="../../assets/imgs/SketchPngb3dd0b8a427b9765a4b086d99ef0c1c9202433c8452e70c36f7a87f78e72589d.png"
        />
      </div> -->
    </div>
    <div class="block_64 flex-row justify-between">
      <div class="box_175 flex-col justify-between">
        <div class="section_2 flex-col">
          <div class="block_1 flex-col">
            <span class="text_2">客户平均停电时间（日度）</span>
            <div class="box_27 flex-row">
              <DatePicker :value="oneTopTime" @change="changeOneTopTime" />
            </div>
            <!-- <div
              class="text-wrapper_2 flex-col pointer"
              @click="changeMonth(1)"
              :class="month === 1 ? 'text-wrapper_chose' : ''"
            >
              <span class="text_3">1月</span>
            </div>
            <div
              class="text-wrapper_3 flex-col pointer"
              @click="changeMonth(2)"
              :class="month === 2 ? 'text-wrapper_chose' : ''"
            >
              <span class="text_4">2月</span>
            </div>
            <div
              class="text-wrapper_4 flex-col pointer"
              @click="changeMonth(3)"
              :class="month === 3 ? 'text-wrapper_chose' : ''"
            >
              <span class="text_5">3月</span>
            </div>
            <div
              class="text-wrapper_5 flex-col pointer"
              @click="changeMonth(4)"
              :class="month === 4 ? 'text-wrapper_chose' : ''"
            >
              <span class="text_6">4月</span>
            </div>
            <div
              class="text-wrapper_6 flex-col pointer"
              @click="changeMonth(5)"
              :class="month === 5 ? 'text-wrapper_chose' : ''"
            >
              <span class="text_7">5月</span>
            </div>
            <div
              class="text-wrapper_7 flex-col pointer"
              @click="changeMonth(6)"
              :class="month === 6 ? 'text-wrapper_chose' : ''"
            >
              <span class="text_8">7月</span>
            </div>
            <div
              class="text-wrapper_8 flex-col pointer"
              @click="changeMonth(7)"
              :class="month === 7 ? 'text-wrapper_chose' : ''"
            >
              <span class="text_9">6月</span>
            </div>
            <div
              class="text-wrapper_9 flex-col pointer"
              @click="changeMonth(8)"
              :class="month === 8 ? 'text-wrapper_chose' : ''"
            >
              <span class="text_10">8月</span>
            </div>
            <div
              class="text-wrapper_10 flex-col pointer"
              @click="changeMonth(9)"
              :class="month === 9 ? 'text-wrapper_chose' : ''"
            >
              <span class="text_11">9月</span>
            </div>
            <div
              class="text-wrapper_11 flex-col pointer"
              @click="changeMonth(10)"
              :class="month === 10 ? 'text-wrapper_chose' : ''"
            >
              <span class="text_12">10月</span>
            </div>
            <div
              class="text-wrapper_12 flex-col pointer"
              @click="changeMonth(11)"
              :class="month === 11 ? 'text-wrapper_chose' : ''"
            >
              <span class="text_13">11月</span>
            </div>
            <div
              class="text-wrapper_13 flex-col pointer"
              @click="changeMonth(12)"
              :class="month === 12 ? 'text-wrapper_chose' : ''"
            >
              <span class="text_14">12月</span>
            </div> -->
          </div>
          <div class="box_176 flex-row justify-between">
            <div class="group_3 flex-row">
              <img
                class="label_1"
                referrerpolicy="no-referrer"
                src="../../assets/imgs/SketchPng368fbbb0d2455e20f07492ce62193eab2f743b979a639414fc13dce46edd5a17.png"
              />
              <div class="text-wrapper_87 flex-col justify-between">
                <span class="text_15">计划值</span>
                <!-- <span class="text_16">88h</span> -->
                <div class="text_16"><BigNumber :value="toFixed(one1.planned, 0)" />h</div>
              </div>
              <img
                class="image_1"
                referrerpolicy="no-referrer"
                src="../../assets/imgs/SketchPng79c000544a11b1b7fbb1f57fa8d797ddf043be7ba73632811e29a8ad238b95e4.png"
              />
              <div class="text-wrapper_88 flex-col justify-between">
                <span class="text_17">完成率</span>
                <span class="text_18"
                  ><BigNumber :value="toPercent(one1.completion)" />%</span
                >
              </div>
            </div>
            <div class="group_4 flex-row">
              <div class="block_65 flex-col">
                <span class="text_19">客户平均停电时间</span>
                <span class="text_20"
                  ><BigNumber :value="toFixed(one2.avgOutage)" />h</span
                >
                <DropNumber :value="toFixed(one2.prevAvgOutageRate, 0)" />
                <!-- <div class="section_55 flex-row">
                  <span class="text_21">同比降幅：</span>
                  <img
                    class="thumbnail_1"
                    referrerpolicy="no-referrer"
                    src="../../assets/imgs/SketchPngfeaefaddb12411d6a887b24ab7d6f97e36a67084719a218ccb97eca160f7bbb8.png"
                  />
                  <span class="text_22">15%</span>
                </div> -->
              </div>
              <img
                class="image_2"
                referrerpolicy="no-referrer"
                src="../../assets/imgs/SketchPngc3a325191415fbfb175de5bf72896eb7ed900d10171bace90e42e7d9478609b7.png"
              />
              <div class="block_66 flex-col">
                <span class="text_23">预安排平均停电时间</span>
                <span class="text_24"
                  ><BigNumber :value="toFixed(one2.scheduled)" />h</span
                >
                <DropNumber :value="toFixed(one2.prevScheduledRate, 0)" />
                <!-- <div class="group_206 flex-row">
                  <span class="text_25">同比降幅：</span>
                  <img
                    class="thumbnail_2"
                    referrerpolicy="no-referrer"
                    src="../../assets/imgs/SketchPng57bfafdffea6b798c5cb81376d0e2f2f671e35fee009be71fd6eb932ffbc3f4e.png"
                  />
                  <span class="text_26">10%</span>
                </div> -->
              </div>
              <img
                class="image_3"
                referrerpolicy="no-referrer"
                src="../../assets/imgs/SketchPng0a0a82a635e069b7685fe04885e8fb47e5ee68ff40d45985b8ccf9aa19f7ba90.png"
              />
              <div class="block_67 flex-col">
                <span class="text_27">故障平均停电时间</span>
                <span class="text_28"
                  ><BigNumber :value="toFixed(one2.fault)" />h</span
                >
                <DropNumber :value="toFixed(one2.prevFaultRate, 0)" />
                <!-- <div class="section_56 flex-row">
                  <span class="text_29">同比降幅：</span>
                  <img
                    class="thumbnail_3"
                    referrerpolicy="no-referrer"
                    src="../../assets/imgs/SketchPng3c23845c4a172031812ccd4368fd9e7fdc3d949b830e572fb79fc1cc53868ada.png"
                  />
                  <span class="text_30">10%</span>
                </div> -->
              </div>
            </div>
          </div>
          <div class="box_177 flex-row justify-between">
            <div class="box_2 flex-col">
              <Left :data="one3" />
            </div>
            <div class="box_7 flex-col">
              <LeftTwo :data="one4" />
            </div>
          </div>
        </div>
        <div class="section_11 flex-col">
          <div class="group_20 flex-col">
            <span class="text_63">客户平均停电时间（累计）</span>
            <div class="box_27 flex-row">
              <DatePicker :value="oneBottomTime" type="year" @change="changeOneBottomTime" />
              <!-- <span class="text_64">202501</span>
              <img
                class="thumbnail_7"
                referrerpolicy="no-referrer"
                src="../../assets/imgs/SketchPng0d534bc03d820119efd38d612968fe712a26ef417aa3be6f092d33d491e5a77f.png"
              />
              <span class="text_65">202507</span>
              <img
                class="thumbnail_8"
                referrerpolicy="no-referrer"
                src="../../assets/imgs/SketchPng465b5bcbdf360644b92a08d27c9cb3a438f08ab027add63734e8d1796a696213.png"
              /> -->
            </div>
          </div>
          <div class="group_210 flex-row justify-between">
            <div class="block_12 flex-row">
              <img
                class="label_2"
                referrerpolicy="no-referrer"
                src="../../assets/imgs/SketchPng16282d62192d5d70965b2941334210648f8d8bc6eb063e483e99e3c88004b353.png"
              />
              <div class="text-wrapper_93 flex-col justify-between">
                <span class="text_66">计划值</span>
                <span class="text_67"
                  ><BigNumber :value="toFixed(one5.planned, 0)" />h</span
                >
              </div>
              <img
                class="image_9"
                referrerpolicy="no-referrer"
                src="../../assets/imgs/SketchPng66eb6a2f5ac7fa175f9100ceddd4def6903abf8cb2ae330dbb03c434f40487f8.png"
              />
              <div class="text-wrapper_94 flex-col justify-between">
                <span class="text_68">完成率</span>
                <span class="text_69"
                  ><BigNumber :value="toPercent(one5.completion)" />%</span
                >
              </div>
            </div>
            <div class="block_13 flex-row">
              <div class="box_181 flex-col">
                <span class="text_70">客户平均停电时间</span>
                <span class="text_71"
                  ><BigNumber :value="toFixed(one6.avgOutage)" />h</span
                >
                <DropNumber :value="toFixed(one6.prevAvgOutageRate, 0)" />
                <!-- <div class="block_68 flex-row">
                  <span class="text_72">同比降幅：</span>
                  <img
                    class="thumbnail_9"
                    referrerpolicy="no-referrer"
                    src="../../assets/imgs/SketchPng887e8fd9e7b66c4f9a4100d56a0a7f1146d309ece0f912a55451e79b816e4c70.png"
                  />
                  <span class="text_73">11%</span>
                </div> -->
              </div>
              <img
                class="image_10"
                referrerpolicy="no-referrer"
                src="../../assets/imgs/SketchPngde81a45c88712f545bfe6466592fcff22433ae07482c08aa8b6d5333958afd69.png"
              />
              <div class="box_182 flex-col">
                <span class="text_74">预约排平均停电时间</span>
                <span class="text_75"
                  ><BigNumber :value="toFixed(one6.scheduled)" />h</span
                >
                <DropNumber :value="toFixed(one6.prevScheduledRate, 0)" />
                <!-- <div class="box_183 flex-row">
                  <span class="text_76">同比降幅：</span>
                  <img
                    class="thumbnail_10"
                    referrerpolicy="no-referrer"
                    src="../../assets/imgs/SketchPng887e8fd9e7b66c4f9a4100d56a0a7f1146d309ece0f912a55451e79b816e4c70.png"
                  />
                  <span class="text_77">10%</span>
                </div> -->
              </div>
              <img
                class="image_11"
                referrerpolicy="no-referrer"
                src="../../assets/imgs/SketchPnge8b7e0975d49afd6a7e521f7f4d577011ed362cbce7663bd6d48f23261600814.png"
              />
              <div class="box_184 flex-col">
                <span class="text_78">故障平均停电时间</span>
                <span class="text_79"
                  ><BigNumber :value="toFixed(one6.fault)" />h</span
                >
                <DropNumber :value="toFixed(one6.prevFaultRate, 0)" />
                <!-- <div class="block_69 flex-row">
                  <span class="text_80">同比降幅：</span>
                  <img
                    class="thumbnail_11"
                    referrerpolicy="no-referrer"
                    src="../../assets/imgs/SketchPng887e8fd9e7b66c4f9a4100d56a0a7f1146d309ece0f912a55451e79b816e4c70.png"
                  />
                  <span class="text_81">10%</span>
                </div> -->
              </div>
            </div>
          </div>
          <div class="group_211 flex-row justify-between">
            <div class="section_12 flex-col">
              <Left :data="one7" />
            </div>
            <div class="section_17 flex-col">
              <LeftTwo :data="one8" />
            </div>
          </div>
        </div>
      </div>
      <div class="box_189 flex-col justify-between">
        <div class="box_57 flex-col">
          <div class="group_42 flex-col">
            <span class="text_115">中压线路故障率</span>
            <div class="box_58 flex-row">
              <DatePicker :value="twoTopTime" @change="changeTwoTopTime" />
              <!-- <span class="text_116">开始日期</span>
              <img
                class="thumbnail_15"
                referrerpolicy="no-referrer"
                src="../../assets/imgs/SketchPng199db86ca3fdb43079dd7a8366662a2bbf0c6bb445a6fbb73309b7a312a58b4e.png"
              />
              <span class="text_117">结束日期</span>
              <img
                class="thumbnail_16"
                referrerpolicy="no-referrer"
                src="../../assets/imgs/SketchPng465b5bcbdf360644b92a08d27c9cb3a438f08ab027add63734e8d1796a696213.png"
              /> -->
            </div>
          </div>
          <div class="group_212 flex-row justify-between">
            <div class="box_59 flex-row">
              <!-- <div class="box_59left">
                <span class="text_118">6月</span>
                <div class="group_44 flex-col"></div>
              </div> -->
              <el-dropdown
                @command="onMonthClick"
                :split-button="false"
                placement="bottom-start"
              >
                <div class="box_59left">
                  <span class="text_118">{{ monthValue }}</span>
                  <div class="group_44 flex-col"></div>
                </div>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    :command="item.label"
                    v-for="item in options"
                    :key="item.value"
                    >{{ item.label }}</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>

              <div class="box_59right">
                <div class="text_119">停电次数</div>
                <div class="text_120">
                  <BigNumber :value="two1.outageCount" />
                </div>
                <div class="text_121">次</div>
              </div>
            </div>
            <div class="box_60 flex-col">
              <div class="text-wrapper_99 flex-row justify-between">
                <span class="text_122">累计完成</span>
                <span class="text_123">年度目标</span>
              </div>
              <div class="group_213 flex-row">
                <div class="box_60left">
                  <span class="text_124"
                    ><BigNumber :value="two2.cumulativeCompletion"
                  /></span>
                  <span class="text_125">次</span>
                  <!-- <span class="text_126">同比降幅：</span>
                  <img
                    class="thumbnail_17"
                    referrerpolicy="no-referrer"
                    src="../../assets/imgs/SketchPngff20dcf7b5f4240f0b592a61181780e3efa34dbc056829dee38327f5a364b6d6.png"
                  />
                  <span class="text_127"
                    ><BigNumber
                      :value="toFixed(two2.cumulativeCompletionRate, 0)"
                    />%</span
                  > -->
                  <DropNumber isInline :value="toFixed(two2.cumulativeCompletionRate, 0)" />
                </div>
                <div>
                  <span class="text_128"
                  ><BigNumber :value="two2.annualTarget"
                /></span>
                <span class="text_129">次</span>
                <!-- <span class="text_130">同比降幅：</span>
                <img
                  class="thumbnail_17"
                  referrerpolicy="no-referrer"
                  src="../../assets/imgs/SketchPngff20dcf7b5f4240f0b592a61181780e3efa34dbc056829dee38327f5a364b6d6.png"
                />
                <span class="text_131"
                  ><BigNumber
                    :value="toFixed(two2.annualTargetRate, 0)"
                  />%</span
                > -->
                <DropNumber isInline :value="toFixed(two2.annualTargetRate, 0)" />
                </div>
              </div>
            </div>
          </div>
          <div class="group_45 flex-col">
            <LeftThree :data="two3" />
          </div>
        </div>
        <div class="box_67 flex-col">
          <div class="group_74 flex-col">
            <span class="text_150">中压线路故障原因分析</span>
            <div class="group_75 flex-row">
              <DatePicker :value="twoBottomTime" @change="changeTwoBottomTime" />
            </div>
            <!-- <div class="group_75 flex-row">
              <span class="text_151">开始日期</span>
              <img
                class="thumbnail_20"
                referrerpolicy="no-referrer"
                src="../../assets/imgs/SketchPng199db86ca3fdb43079dd7a8366662a2bbf0c6bb445a6fbb73309b7a312a58b4e.png"
              />
              <span class="text_152">结束日期</span>
              <img
                class="thumbnail_21"
                referrerpolicy="no-referrer"
                src="../../assets/imgs/SketchPng465b5bcbdf360644b92a08d27c9cb3a438f08ab027add63734e8d1796a696213.png"
              />
            </div> -->
          </div>
          <div class="group_76 flex-col">
            <div class="box_190 flex-row">
              <img
                class="image_24"
                referrerpolicy="no-referrer"
                src="../../assets/imgs/SketchPng7c9234f31dfba2987f06e75cbcba7203428cc3095bfc13591a733753be7dfa94.png"
              />
              <span class="text_153">各故障原因次数</span>
            </div>
            <div class="box_191 flex-row">
              <PieChartTop :data="two4.countByReason" />
            </div>
          </div>
          <div class="box_192 flex-row justify-between beautify-scroll-def">
            <div v-for="(item, i) in two4.countByReason" :key="item.failureReason" class="section_22 flex-col" :class="i > 0 ? 'section_23' : ''">
              <div class="text-wrapper_29 flex-col">
                <span class="text_166">{{item.failureReason}}</span>
              </div>
              <PieChart :data="two4.countByType[item.failureReason]" />
            </div>
            <!-- <div class="section_23 flex-col">
              <div class="text-wrapper_30 flex-col">
                <span class="text_173">故障原因2</span>
              </div>
              <PieChart />
            </div>
            <div class="section_25 flex-col">
              <div class="text-wrapper_31 flex-col">
                <span class="text_180">故障原因3</span>
              </div>
              <PieChart />
            </div>
            <div class="section_25 flex-col">
              <div class="text-wrapper_31 flex-col">
                <span class="text_180">故障原因3</span>
              </div>
              <PieChart />
            </div>
            <div class="section_25 flex-col">
              <div class="text-wrapper_31 flex-col">
                <span class="text_180">故障原因3</span>
              </div>
              <PieChart />
            </div> -->
          </div>
        </div>
      </div>
      <div class="box_195 flex-col justify-between">
        <div class="box_77 flex-col">
          <div class="box_78 flex-col">
            <span class="text_187">线路中压指标完成情况</span>
            <div class="box_79 flex-row">
              <DatePicker :value="threeTopTime" @change="changeThreeTopTime" />
              <!-- <span class="text_188">开始日期</span>
              <img
                class="thumbnail_22"
                referrerpolicy="no-referrer"
                src="../../assets/imgs/SketchPng199db86ca3fdb43079dd7a8366662a2bbf0c6bb445a6fbb73309b7a312a58b4e.png"
              />
              <span class="text_189">结束日期</span>
              <img
                class="thumbnail_23"
                referrerpolicy="no-referrer"
                src="../../assets/imgs/SketchPng465b5bcbdf360644b92a08d27c9cb3a438f08ab027add63734e8d1796a696213.png"
              /> -->
            </div>
          </div>
          <div class="group_217 flex-row justify-between">
            <div class="block_24 flex-col">
              <LeftFour :data="three1" />
            </div>
            <!-- 排名 -->
            <Rank :data="three1" />
          </div>
        </div>
        <div class="box_89 flex-col">
          <div class="section_29 flex-col">
            <span class="text_248">线路低压指标完成情况</span>
            <div class="section_30 flex-row">
              <DatePicker :value="threeTopTime1" @change="changeThreeTopTime1" />
              <!-- <span class="text_249">开始日期</span>
              <img
                class="thumbnail_34"
                referrerpolicy="no-referrer"
                src="../../assets/imgs/SketchPng199db86ca3fdb43079dd7a8366662a2bbf0c6bb445a6fbb73309b7a312a58b4e.png"
              />
              <span class="text_250">结束日期</span>
              <img
                class="thumbnail_35"
                referrerpolicy="no-referrer"
                src="../../assets/imgs/SketchPng465b5bcbdf360644b92a08d27c9cb3a438f08ab027add63734e8d1796a696213.png"
              /> -->
            </div>
          </div>
          <div class="group_218 flex-row justify-between">
            <div class="group_103 flex-col">
              <LeftFour :data="three2" />
            </div>
            <div class="group_118 flex-col">
              <Rank :data="three2" />
            </div>
          </div>
        </div>
        <div class="box_96 flex-col">
          <div class="section_35 flex-col">
            <span class="text_309">设备主人0故障天数</span>
            <!-- <div class="section_36 flex-row">
              <DatePicker @change="change" />
            </div> -->
          </div>
          <div class="box_196 flex-row justify-between">
            <BlankRedRank :isRed="true" :data="three3" />
            <BlankRedRank :isRed="false" :data="three4" />
          </div>
        </div>
      </div>
    </div>
    <div class="group_124 flex-col">
      <div class="text-wrapper_103 flex-row">
        <span class="text_431">供电可靠性场景</span>
      </div>
      <div class="block_81 flex-row">
        <!-- <img
          class="image_23"
          referrerpolicy="no-referrer"
          src="../../assets/imgs/SketchPnga6cc243783471b2679432d3ed7a5526a2d3fdf2def02a7fb1522746f9701fc2e.png"
        /> -->
        <div class="block_82 flex-col justify-between">
          <div class="box_99 flex-row">
            <img
              v-if="sceneLabel.includes('跳闸率')"
              @click="changeSceneLabel('跳闸率')"
              class="thumbnail_53"
              referrerpolicy="no-referrer"
              src="../../assets/imgs/SketchPng749186513adf700e4a8b01f565796721783fe5e6351bff2353c8148d536e82c5.png"
            />
            <img
              v-else
              @click="changeSceneLabel('跳闸率')"
              class="thumbnail_53"
              referrerpolicy="no-referrer"
              src="../../assets/imgs/SketchPngf42ae5aee1f70eb5ec542c5b4024488b4a1ae0fa012f179f6de09c8aa95697c2.png"
            />
            <div class="text-wrapper_51 flex-col">
              <span class="text_345">跳闸率</span>
            </div>
            <img
              v-if="sceneLabel.includes('强停率')"
              @click="changeSceneLabel('强停率')"
              class="thumbnail_53"
              referrerpolicy="no-referrer"
              src="../../assets/imgs/SketchPng749186513adf700e4a8b01f565796721783fe5e6351bff2353c8148d536e82c5.png"
            />
            <img
              v-else
              @click="changeSceneLabel('强停率')"
              class="thumbnail_53"
              referrerpolicy="no-referrer"
              src="../../assets/imgs/SketchPngf42ae5aee1f70eb5ec542c5b4024488b4a1ae0fa012f179f6de09c8aa95697c2.png"
            />
            <div class="text-wrapper_52 flex-col">
              <span class="text_346">强停率</span>
            </div>
            <img
              v-if="sceneLabel.includes('指标域度')"
              @click="changeSceneLabel('指标域度')"
              class="thumbnail_53"
              referrerpolicy="no-referrer"
              src="../../assets/imgs/SketchPng749186513adf700e4a8b01f565796721783fe5e6351bff2353c8148d536e82c5.png"
            />
            <img
              v-else
              @click="changeSceneLabel('指标域度')"
              class="thumbnail_53"
              referrerpolicy="no-referrer"
              src="../../assets/imgs/SketchPngf42ae5aee1f70eb5ec542c5b4024488b4a1ae0fa012f179f6de09c8aa95697c2.png"
            />
            <div class="text-wrapper_53 flex-col">
              <span class="text_347">指标域度</span>
            </div>
          </div>
          <div class="box_100 flex-col">
            <div class="box_101 flex-row">
              <img
                class="thumbnail_56"
                referrerpolicy="no-referrer"
                src="../../assets/imgs/SketchPnga78b206145806f41bc51ee84a536041c58dfd7dc05c04982e2ece4b4282feca4.png"
              />
              <span class="text_348">部门举措完成情况</span>
              <div class="group_122 flex-row">
                <DatePicker :type="'monthrange'" :value="fourTopTime" @change="changeFourTopTime" />
                <!-- <span class="text_349">开始日期</span>
                <img
                  class="thumbnail_57"
                  referrerpolicy="no-referrer"
                  src="../../assets/imgs/SketchPng199db86ca3fdb43079dd7a8366662a2bbf0c6bb445a6fbb73309b7a312a58b4e.png"
                />
                <span class="text_350">结束日期</span>
                <img
                  class="thumbnail_58"
                  referrerpolicy="no-referrer"
                  src="../../assets/imgs/SketchPng465b5bcbdf360644b92a08d27c9cb3a438f08ab027add63734e8d1796a696213.png"
                /> -->
              </div>
            </div>
            <!-- 部门举措完成情况 -->
            <LeftSix :data="four1" />
          </div>
          <div class="box_102 flex-row">
            <div
              class="text-wrapper_59 flex-col"
              @click="changeSceneType('输电')"
              :class="sceneType === '输电' ? 'text-wrapper_59_chose' : ''"
            >
              <span :class="sceneType === '输电' ? 'text_366' : 'text_367'"
                >输电</span
              >
            </div>
            <div
              class="text-wrapper_59 flex-col"
              @click="changeSceneType('变电')"
              :class="sceneType === '变电' ? 'text-wrapper_59_chose' : ''"
            >
              <span :class="sceneType === '变电' ? 'text_366' : 'text_367'"
                >变电</span
              >
            </div>
            <div
              class="text-wrapper_59 flex-col"
              @click="changeSceneType('配电')"
              :class="sceneType === '配电' ? 'text-wrapper_59_chose' : ''"
            >
              <span :class="sceneType === '配电' ? 'text_366' : 'text_367'"
                >配电</span
              >
            </div>
          </div>
          <div class="box_103 flex-col">
            <div class="group_123 flex-col">
              <span class="text_369">专项行动方案举措完成情况</span>
              <div class="box_104 flex-row">
                <DatePicker @change="change" />
                <!-- <span class="text_370">开始日期</span>
                <img
                  class="thumbnail_59"
                  referrerpolicy="no-referrer"
                  src="../../assets/imgs/SketchPng199db86ca3fdb43079dd7a8366662a2bbf0c6bb445a6fbb73309b7a312a58b4e.png"
                />
                <span class="text_371">结束日期</span>
                <img
                  class="thumbnail_60"
                  referrerpolicy="no-referrer"
                  src="../../assets/imgs/SketchPng465b5bcbdf360644b92a08d27c9cb3a438f08ab027add63734e8d1796a696213.png"
                /> -->
              </div>
            </div>
            <!-- 专项行动方案举措完成情况 -->
            <LeftSix :height="150" />
          </div>
        </div>
        <div class="group_125 flex-col justify-center" style="background: none">
          <Map :data="fourMap" />
        </div>
        <div class="block_86 flex-col justify-between">
          <div class="block_49 flex-row">
            <img
              class="image_32"
              referrerpolicy="no-referrer"
              src="../../assets/imgs/SketchPngf8b9a09c0df8ddacb03c090c81b5107781dff9dd9d2d932aecc0575593bfb1c5.png"
            />
            <div class="group_229 flex-col justify-between">
              <span class="text_422">中压线路故障率</span>
              <div class="text-wrapper_67">
                <span class="text_423"><BigNumber :value="toFixed(fourMap1.mediumVoltageFailureRate || 2.95, 2)" /></span>
                <span class="text_424">%</span>
              </div>
            </div>
          </div>
          <div class="block_50 flex-row">
            <img
              class="image_33"
              referrerpolicy="no-referrer"
              src="../../assets/imgs/SketchPng8c30a9a21498c96fe71339e0798f2652f75a2bec121c899c7dc13fbd955b364d.png"
            />
            <div class="block_87 flex-col justify-between">
              <span class="text_425">客户平均停电时间</span>
              <div class="text-wrapper_68">
                <span class="text_426"><BigNumber :value="toFixed(fourMap1.averageOutageTime, 4)" /></span>
                <span class="text_427">h</span>
              </div>
            </div>
          </div>
          <div class="block_51 flex-row">
            <img
              class="image_34"
              referrerpolicy="no-referrer"
              src="../../assets/imgs/SketchPng9361cef487cf81046545090903a76ddae87493f1812971c4c0a646eea1537b60.png"
            />
            <div class="block_88 flex-col justify-between">
              <span class="text_428">故障次数</span>
              <div class="text-wrapper_69">
                <span class="text_429"><BigNumber :value="toFixed(fourMap1.failureNumber, 1)" /></span>
                <span class="text_430">次</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Left from "./components/Left.vue";
import LeftTwo from "./components/LeftTwo.vue";
import LeftThree from "./components/LeftThree.vue";
import PieChart from "./components/PieChart.vue";
import Rank from "./components/Rank.vue";
import BlankRedRank from "./components/BlankRedRank.vue";
import LeftFour from "./components/LeftFour.vue";
import LeftSix from "./components/LeftSix.vue";
import BigNumber from "./components/BigNumber.vue";
import DatePicker from "./components/DatePicker.vue";
import PieChartTop from "./components/PieChartTop.vue";
import Map from "./components/Map.vue";
import DropNumber from "./components/DropNumber.vue";
import moment from "moment";

import {
  avg,
  selectPlanByDateAndLine,
  avgByDate,
  avgByLine,
  avgRange,
  selectPlanByDateAndLineRange,
  avgByDateRange,
  avgByLineRange,
  getSumOutageCountByMonth,
  getCompletionAndTargetByDate,
  getCompletionAndTargetByLine,
  getMediumVoltageFailureAnalysis,
  getByLineAndType,
  selectMapDate,
  selectAvgMapDate,
  selectDepartmentCompletion,
  getRedList,
  getBlackList,
} from "@/api/server";


export default {
  components: {
    Left,
    LeftTwo,
    LeftThree,
    PieChart,
    Rank,
    BlankRedRank,
    LeftFour,
    LeftSix,
    BigNumber,
    DatePicker,
    PieChartTop,
    Map,
    DropNumber,
  },
  data() {
    return {
      constants: {},
      month: null,
      sceneLabel: ["跳闸率"],
      sceneType: "输电",
      planVal: 88,
      value1: "",
      monthValue: "",
      options: [],
      oneTopTime: [],
      oneBottomTime: '',
      twoTopTime: [],
      twoBottomTime: [],
      threeTopTime: [],
      threeTopTime1: [],
      fourTopTime: [],
      one1: {
        planned: 0,
        completion: 0,
      },
      one2: {
        avgOutage: 0,
        scheduled: 0,
        fault: 0,
        prevAvgOutageRate: 0,
        prevScheduledRate: 0,
        prevFaultRate: 0,
      },
      one3: [],
      one4: [],
      one5: {
        planned: 0,
        completion: 0,
      },
      one6: {
        avgOutage: 0,
        scheduled: 0,
        fault: 0,
        prevAvgOutageRate: 0,
        prevScheduledRate: 0,
        prevFaultRate: 0,
      },
      one7: [],
      one8: [],
      two1: {
        outageCount: 0,
      },
      two2: {
        cumulativeCompletion: 0, // 完成值
        cumulativeCompletionRate: 0, // 完成值同比增长率
        annualTarget: 0, // 年度目标
        annualTargetRate: 0, // 年度目标同比增长率
      },
      two3: [],
      two4: {},
      three1: [],
      three2: [],
      three3: [],
      three4: [],
      four1: [],
      fourMap: [],
      fourMap1: {
        mediumVoltageFailureRate: 0, // 跳闸率
        averageOutageTime: 0, // 强停率
        failureNumber: 0, // 指标域度
      },
      timer: null
    };
  },
  created() {
    this.initSearch()
    this.getMonthOptions();
    // 定时刷新
    // this.setInterval()
  },
  watch: {
    monthValue() {
      this.twoTop1()
    },
    oneTopTime(){
       this.oneTop()
    },
    oneBottomTime(){
      this.oneBottom()
    },
    twoTopTime(){
      this.twoTop()
    },
    twoBottomTime(){
      this.twoBottom()
    },
    threeTopTime(){
      this.threeTop()
    },
    threeTopTime1(){
      this.threeTop1()
    },
    fourTopTime(){
      this.fourTop()
    },
  },
  computed: {},
  methods: {
    initSearch(){
      this.monthValue = '3月'
      // this.month = 3
      this.oneTopTime = [moment("2025-03-01").format('YYYY-MM-DD'), moment("2025-03-30").format('YYYY-MM-DD')]
      this.oneBottomTime = moment("2025").format('YYYY')
      this.twoTopTime = [moment("2025-01-01").format('YYYY-MM-DD'), moment("2025-12-31").format('YYYY-MM-DD')]
      this.twoBottomTime = [moment("2025-01-01").format('YYYY-MM-DD'), moment("2025-12-31").format('YYYY-MM-DD')]
      this.threeTopTime = [moment("2025-01-01").format('YYYY-MM-DD'), moment("2025-12-31").format('YYYY-MM-DD')]
      this.threeTopTime1 = [moment("2025-01-01").format('YYYY-MM-DD'), moment("2025-12-31").format('YYYY-MM-DD')]
      this.threeBottom()
      this.getFourMap()
      this.fourTopTime = [moment("2025-03-01").format('YYYY-MM'), moment("2025-03-30").format('YYYY-MM')]
    },
    // 3-1获取月份
    getMonthOptions() {
      const YYYY = moment().format("YYYY-");
      const num = Number(moment().format("MM"));
      const ll = Array.from({ length: num }, (_, index) => index + 1);
      this.options = ll.map((item) => {
        return {
          value: YYYY + String(item).padStart(2, "0"),
          label: item + "月",
        };
      });
    },
    onMonthClick(val) {
      this.monthValue = val;
    },
    toFixed(val, fix = 2) {
      return val || val === 0 ? Number(val).toFixed(fix) : "-";
    },
    toPercent(val, multiple = 100, fix = 0) {
      return val || val === 0 ? Number(val * multiple).toFixed(fix) : "-";
    },
    changeFourTopTime(val){
      this.fourTopTime = val
    },
    changeThreeTopTime1(val){
      this.threeTopTime1 = val
    },
    changeThreeTopTime(val){
      this.threeTopTime = val
    },
    changeTwoBottomTime(val){
      this.twoBottomTime = val
    },
    changeOneTopTime(val){
      this.oneTopTime = val
    },
    changeOneBottomTime(val){
      this.oneBottomTime = val
    },
    changeTwoTopTime(val){
      this.twoTopTime = val
    },
    change(val) {
      console.log(val, "val----");
    },
    // changeMonth(val) {
    //   console.log(val, "客户平均停电时间（日度）");
    //   this.month = val;
     
    // },
    // 供电可靠性场景
    changeSceneType(val) {
      console.log(val, "供电可靠性场景");
      this.sceneType = val;
    },
    changeSceneLabel(val) {
      console.log(val, "供电可靠性场景");
      if (this.sceneLabel.includes(val)) {
        this.sceneLabel = this.sceneLabel.filter((v) => v !== val);
      } else {
        const ll = [...this.sceneLabel];
        ll.push(val);
        this.sceneLabel = ll;
      }
    },
    setInterval(){
      let looper = (a) => {
        this.init()
      };
      // this.timer = setTimeout(looper, this.$store.state.setting.echartsAutoTime);
      this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
    },
    clearData() {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
    },
    init() {
      this.oneTop();
      this.oneBottom();
      this.twoTop1();
      this.twoTop();
      this.twoBottom();
      this.threeTop();
      this.threeTop1();
      this.threeBottom()
      this.getFourMap();
    },
    oneTop() {
      // -----------客户平均停电时间--------------------
      // const date = moment().format('YYYY-') + String(this.month).padStart(2, "0");
      const startDate = this.oneTopTime[0];
      const endDate = this.oneTopTime[1];
      // 1-1
      avg({ startDate, endDate }).then((res) => {
        if (res) {
          this.one1 = res;
        } else {
          this.one1 = {
            planned: 0,
            completion: 0,
          };
        }
      });
      // 1-3
      selectPlanByDateAndLine({ startDate, endDate }).then((res) => {
        console.log(res, "res-----------");
        if (res && res.length) {
          this.one3 = res;
        } else {
          this.one3 = [];
        }
      });
      // 1-2
      avgByDate({ startDate, endDate }).then((res) => {
        console.log(res, "one2-----------");
        if (res && res.length) {
          this.one2 = res[0] || {
            avgOutage: 0,
            scheduled: 0,
            fault: 0,
          };
        } else {
          this.one2 = {
            avgOutage: 0,
            scheduled: 0,
            fault: 0,
            prevAvgOutageRate: 0,
            prevScheduledRate: 0,
            prevFaultRate: 0,
          };
        }
      });
      // 1-4
      avgByLine({ startDate, endDate }).then((res) => {
        if (res && res.length) {
          this.one4 = res;
        } else {
          this.one4 = [];
        }
      });
    },
    oneBottom() {
      // -----------客户平均停电时间（累计）--------------------
      const year = this.oneBottomTime;
      // 1-5
      avgRange({ year }).then((res) => {
        // console.log(res, "res-----------");
        if (res) {
          this.one5 = res;
        } else {
          this.one5 = {
            planned: 0,
            completion: 0,
          };
        }
      });
      // 1-7
      selectPlanByDateAndLineRange({ year }).then((res) => {
        if (res && res.length) {
          this.one7 = res;
        } else {
          this.one7 = [];
        }
      });
      // 1-6
      avgByDateRange({ year }).then((res) => {
        if (res && res.length) {
          this.one6 = res[0];
        } else {
          this.one6 = {
            avgOutage: 0,
            scheduled: 0,
            fault: 0,
            prevAvgOutageRate: 0,
            prevScheduledRate: 0,
            prevFaultRate: 0,
          };
        }
      });
      // 1-8
      avgByLineRange({ year }).then((res) => {
        if (res && res.length) {
          this.one8 = res;
        } else {
          this.one8 = [];
        }
      });
    },
    twoTop1(){
      const date = this.options.find((item) => item.label === this.monthValue).value;
      if (date) {
        // 2-1
        getSumOutageCountByMonth({ date }).then((res) => {
          // console.log(res, "res-----------");
          if (res) {
            this.two1 = res;
          } else {
            this.two1 = {
              outageCount: 0,
            };
          }
        });
      }
    },
    twoTop() {
      // -----------中压线路故障率--------------------
      // const date = "2025-03";
      const startDate = this.twoTopTime[0];
      const endDate = this.twoTopTime[1];
      // 2-1
      // getSumOutageCountByMonth({ date }).then((res) => {
      //   // console.log(res, "res-----------");
      //   if (res) {
      //     this.two1 = res;
      //   }
      // });
      // 2-2
      getCompletionAndTargetByDate({ startDate, endDate }).then((res) => {
        if (res) {
          this.two2 = res;
        } else {
          this.two2 = {
            cumulativeCompletion: 0, // 完成值
            cumulativeCompletionRate: 0, // 完成值同比增长率
            annualTarget: 0, // 年度目标
            annualTargetRate: 0, // 年度目标同比增长率
          };
        }
      });
      // 2-3
      getCompletionAndTargetByLine({ startDate, endDate }).then((res) => {
        if (res && res.length) {
          this.two3 = res;
        } else {
          this.two3 = [];
        }
      });
    },
    twoBottom() {
      // -----------中压线路故障率--------------------
      // const date = "2025-03";
      const startDate = this.twoBottomTime[0];
      const endDate = this.twoBottomTime[1];
      // 2-4原因分析
      getMediumVoltageFailureAnalysis({ startDate, endDate }).then((res) => {
        if (res) {
          this.two4 = res;
        } else {
          this.two4 = {
            countByReason: [], // 完成值
            countByType: {}, // 完成值同比增长率
          };
        }
      });
    },
    threeTop() {
      // -----------线路中压/低压指标完成情况--------------------
      const startDate = this.threeTopTime[0];
      const endDate = this.threeTopTime[1];
      // 3-1和3-2
      getByLineAndType({ startDate, endDate, indicatorType: '中压' }).then((res) => {
        if (res) {
          this.three1 = res;
        } else {
          this.three1 = [];
        }
      });
    },
    threeTop1() {
      // -----------线路中压/低压指标完成情况--------------------
      const startDate = this.threeTopTime1[0];
      const endDate = this.threeTopTime1[1];
      // 3-3和3-4
      getByLineAndType({ startDate, endDate, indicatorType: '低压' }).then((res) => {
        if (res) {
          this.three2 = res;
        } else {
          this.three2 = [];
        }
      });
    },
    threeBottom() {
      // -----------线路中压/低压指标完成情况--------------------
      const startDate = this.threeTopTime1[0];
      const endDate = this.threeTopTime1[1];
      // 3-5
      getRedList({ }).then((res) => {
        if (res) {
          this.three3 = res;
        } else {
          this.three3 = [];
        }
      });
      // 3-6
      getBlackList({ }).then((res) => {
        if (res) {
          this.three4 = res;
        } else {
          this.three4 = [];
        }
      });
    },
    fourTop() {
      // -----------部门举措完成情况--------------------
      const startDate = this.fourTopTime[0];
      const endDate = this.fourTopTime[1];
      // 部门举措完成情况
      selectDepartmentCompletion({ startDate, endDate }).then((res) => {
        if (res) {
          this.four1 = res;
        } else {
          this.four1 = [];
        }
      });
    },
    getFourMap() {
      // -----------地图--------------------
      // 地图
      selectMapDate().then((res) => {
        console.log(res,'res------------------地图');
        
        if (res) {
          this.fourMap = res;
        } else {
          this.fourMap = [];
        }
      });
      // 地图-平均值
      selectAvgMapDate().then((res) => {
        if (res) {
          this.fourMap1 = res;
        } else {
          this.fourMap1 = {
            mediumVoltageFailureRate: 0, // 跳闸率
            averageOutageTime: 0, // 强停率
            failureNumber: 0, // 指标域度
          };
        }
      });
    },
  },
};
</script>
<style scoped lang="scss" src="./common.scss" />
<style scoped lang="scss" src="./index.scss" />
